<script lang="ts" setup>
import { onMounted, ref, onBeforeMount } from "vue";

import { Search } from "@element-plus/icons-vue";
import ethics from "./ethics.vue";
import institution from "./institution.vue";
import Department from "./Department.vue";
import DepartmentUser from "./DepartmentUser.vue";
import major from "./major.vue";
import CertifiedProfessional from "./CertifiedProfessional.vue";
import badUp from "./badUp.vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];
const input2 = ref("");
const currentPage2 = ref(5);
const pageSize2 = ref(100);
const size = ref(10);
const actList = ref([
  "医院",
  "机构",
  "伦理",
  "科室",
  "科室成员",
  "认证专业",
  "不良反应上报",
  "合作申办方",
]);

const active = ref(0);
const changeAct = (val: any) => {
  active.value = val;
};
const testAct = ref("0");
const changeTest = (val: any) => {
  testAct.value = val;
};
</script>
<template>
  <div class="contentbox">
    <ul class="tabList">
      <li
        v-for="(i, n) in actList"
        :class="active == n ? 'on' : ''"
        @click="changeAct(n)"
      >
        {{ i }}
      </li>
    </ul>
    <template v-if="active == 0">
      <h3>基本信息</h3>
      <el-descriptions
        class="margin-top"
        title=""
        :column="3"
        label-width="140"
      >
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 机构： </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 统一社会信用代码： </span>
          </template>
          １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 地址： </span>
          </template>
          河南省 郑州 河南省郑州市东明路127号
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 电话： </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 官网： </span>
          </template>
          １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 等级： </span>
          </template>
          河南省 郑州 河南省郑州市东明路127号
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item">
              是否有医学伦理委员会(或负责伦理的部门)：
            </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 支持在线试验申请： </span>
          </template>
          １2410000415806735G
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title=""
        :column="1"
        label-width="140"
      >
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 医院简介： </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
      </el-descriptions>
      <h3>遗传办递交</h3>
      <el-descriptions
        class="margin-top"
        title=""
        :column="3"
        label-width="140"
      >
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 是否有遗传办递交经验：是 </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 遗传办联系人： </span>
          </template>
          机构办公室
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 联系人职位： </span>
          </template>
          资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 电话：0371-65587418 </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 邮箱： </span>
          </template>
          机构办公室
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 地址： </span>
          </template>
          资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 遗传办本院递交费用： </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 是否可以牵头递交遗传办： </span>
          </template>
          机构办公室
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 人遗办申请所需时间： </span>
          </template>
          资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 遗传办审核流程： </span>
          </template>
          机构：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 遗传办盖章流程： </span>
          </template>
          机构办公室
        </el-descriptions-item>
      </el-descriptions>
      <h3>遗传办流程及文件清单</h3>
      <el-table
        :data="tableData"
        align="left"
        header-row-class-name="headerName"
        :border="false"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div class="justify-between" style="padding: 10px 110px 0 60px">
              <div class="align-center">
                <img
                  src="@/assets/images/word.png"
                  style="width: 20px; margin-right: 10px"
                  alt=""
                />
                文件清单.doc
              </div>
              <div class="align-center">
                <span style="color: #0c9397; cursor: pointer">查看</span>
                <span style="color: #0c9397; cursor: pointer; margin-left: 10px"
                  >下载</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="文件名" width="400">
          <template #default="scope">
            <div class="hospitalInfo">
              <img src="@/assets/images/files.png" style="width: 20px" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="上传时间">
          <template #default="scope">
            <p style="color: #0c9397">试验分类:药代动力学/药效动力学试验</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <!-- <el-button size="mini" style="color: #0C9397;" link> 合作咨询 </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 机构 -->
    <institution v-if="active == 1"></institution>
    <!-- 伦理 -->
    <ethics v-if="active == 2"></ethics>
    <!-- 科室 -->
    <Department v-if="active == 3"></Department>
    <!-- 科室成员 -->

    <major v-if="active == 4"></major>
    <!-- 认证专业 -->
    <CertifiedProfessional v-if="active == 5"></CertifiedProfessional>
    <!-- 机构 -->
    <badUp v-if="active == 6"></badUp>
    <!-- 合作申办方 -->
        <DepartmentUser v-if="active == 7"></DepartmentUser>

  </div>
</template>
<style scoped lang="scss">
.containers {
  // background-color: #fff;
  height: calc(100% - 40px);
  margin: 20px auto;
}

button {
  width: 120px;
  height: 36px;
  background-color: #f5f5f5;
  font-size: 16px;
  margin-right: 11px;
  cursor: pointer;
  color: #333333;
}

.on {
  background-color: #0c9397;
  color: #fff;
}

.searchHeader {
  display: flex;
  margin: 20px 0;
  align-items: center;
  justify-content: space-between;

  .input {
    margin-right: 13px;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.contentbox {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}

.hospitalInfo {
  line-height: 1;
  color: #888888;
  font-size: 16px;
  align-items: center;
  display: flex;

  img {
    margin-right: 10px;
  }

  p {
    color: #333;
    margin-bottom: 10px;
  }

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;

    li {
      width: 44px;
      height: 26px;
      background: #0c9397;
      border-radius: 3px;
      margin-right: 5px;
      color: #fff;
      text-align: center;
      line-height: 26px;
    }
  }
}

.tabList {
  display: flex;
  align-items: center;
  margin-top: 16px;
  color: #333;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;

  li {
    cursor: pointer;
    margin-right: 60px;
    min-width: 64px;
  }

  .on {
    background-color: #0c9397;
    color: #fff;
    padding: 8px 15px;
    font-size: 16px;
  }
}

h3 {
  margin: 20px 0;
  font-size: 16px;
  color: #333333;
  position: relative;
  padding-left: 8px;
}

h3::before {
  position: absolute;
  clear: both;
  width: 3px;
  height: 16px;
  content: "";
  left: 0px;
  background-color: #0c9397;
}
</style>